<div class="profile-banner relative">
  @if (content.bannerBg) {
    <app-bg-img [content]="content.bannerBg" />
  }
</div>
<div class="profile-1v1 relative m-y">
  <div class="container">
    <div class="profile grid grid-cols-12 justify-between items-start gap-8">
      <div class="left m-bottom col-span-12 md:col-span-3">
        <div class="box p-y-sm p-x text-center">
          <app-img [content]="avatar" />
          <h2 class="mat-h2 m-bottom-0 m-top-xs two-line">
            {{ content.name }}
          </h2>
          <div class="subTitle">{{ content.subTitle }}</div>
          @if (content.actions) {
            <div class="actions">
              <button mat-icon-button aria-label="menu" [matMenuTriggerFor]="menu">
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu" class="actions-menu">
                @for (action of content.actions; track action) {
                  <button mat-menu-item>
                    <app-dynamic-component [inputs]="action" />
                  </button>
                }
              </mat-menu>
            </div>
          }
        </div>
        <mat-divider />
        @if (content.details) {
          <div class="left-item p-y-sm p-x-xs">
            <app-title
              [content]="{
                label: content.details.label,
                style: 'style-v4',
              }"
            />
            <div class="list">
              @for (item of content.details.elements; track item) {
                <div class="flex">
                  <app-icon [content]="item.icon" />
                  <div class="label m-right-xs bold">{{ item.label }}:</div>
                  <div class="one-line">{{ item.content }}</div>
                </div>
              }
            </div>
          </div>
        }
        @if (content.leftBottom) {
          <div class="left-bottom p-y-sm p-x-sm">
            <div class="content">
              @for (item of content.leftBottom; track item) {
                <div class="item m-bottom">
                  <app-title [content]="item.title" />
                  <app-dynamic-component [inputs]="item" />
                </div>
              }
            </div>
          </div>
        }
      </div>
      <div class="right col-span-12 md:col-span-9">
        <div class="content">
          @for (item of content.content; track item) {
            <div class="item m-bottom">
              @if (!(item.empty && item.empty === true)) {
                <app-title
                  [content]="{
                    label: item.label,
                    style: 'style-v4',
                  }"
                />
                <app-dynamic-component [inputs]="item" />
              }
            </div>
          }
        </div>
      </div>
    </div>
    @if (content.params?.comment) {
      <div class="comment-wrapper my-3 p-3 md:my-5 md:p-5">
        @if (content.params?.comment) {
          <app-comment-form [content]="content" [type]="'add'" />
        }
        <app-comment-list [comments]="comments" [content]="content" />
      </div>
    }
  </div>
</div>
